<template>
  <div>
    <Category />
    <el-card
      shadow="always"
      :body-style="{ padding: '20px' }"
      style="margin-top: 30px"
    >
      <template #header>
        <el-button type="primary" size="default" icon="ele-Plus"
          >添加属性</el-button
        >
      </template>
      <!-- card body -->
      <el-table :data="attrList" border stripe>
        <el-table-column type="index" width="80" label="序号" />
        <el-table-column label="属性名称" prop="attrName"></el-table-column>
        <el-table-column
          label="属性值名称列表"
          width="500"
          prop="attrValueList"
        >
          <template v-slot="{ row }">
            <el-tag
              style="margin-right: 5px"
              type="danger"
              size="normal"
              effect="dark"
              v-for="item in row.attrValueList"
              :key="item.id"
              >{{ item.valueName }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <el-button type="warning" size="small" icon="ele-Edit"></el-button>
            <el-button type="danger" size="small" icon="ele-Delete"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { reqAttrInfoList, type attrListType } from "@/api/attr";
import { ElMessage } from "element-plus";

export default defineComponent({
  name: "Attr",
});
</script>

<script setup lang="ts">
import { ref, watch } from "vue";
import { storeToRefs } from "pinia";
import useCategoryStore from "@/stores/category";
const categoryStore = useCategoryStore();

// 拿到三级分类的值
const { category1Id, category2Id, category3Id } = storeToRefs(categoryStore);
// 初始化一个属性列表的数据
const attrList = ref<attrListType>([]);
// 等到三级分类的第三级的id改变以后,初始化发送属性列表请求
watch(category3Id, async (newVal) => {
  //因为初始化一级分类的时候,三级分类也会发生改变,变为null,但是此时不需要重新发送请求
  if (!newVal) {
    attrList.value = [];
    return;
  }

  //  一旦3Id改变，则重新发送请求
  try {
    const result = await reqAttrInfoList(
      category1Id.value as number,
      category2Id.value as number,
      category3Id.value as number
    );

    // 对初始值进行赋值
    attrList.value = result;
  } catch (e: any) {
    ElMessage.error(e.message);
  }
});
</script>

<style scoped></style>
